import React, { useCallback } from 'react'
import { useHistory } from 'react-router-dom'
import { useSelector } from'react-redux'

import NavBar from '@/components/navBar/NavBar'
import Scroll from '@/components/scroll/Scroll'
import Card from '@/components/card/Card'
import Icon from '@/components/icon/Icon'
import hospitallistimg from '@/assets/image/hospitallist.png'
import SearchBar from '@/components/searchBar/SearchBar'

import { loadDataSaga } from './store/actionCreator'
import { HospitalListWrapper } from './styledHospital'

export default function Hospital() {
    const list = useSelector(state => {
        return state.getIn(['hospitalList', 'list'])
    })

    const history = useHistory()

    const backHome = useCallback(() => {
        history.push('/home')
        
    },[history])

    const goHospitalhome = useCallback((id) => {
        return () => {
            history.push('/home/hospitalhome/'+id)
        }
    },[history])

    return (
            <HospitalListWrapper>
                <NavBar
                title = '附近机构'
                leftArrow
                clickLeft = { backHome }
                ></NavBar>
                <div className='search'>
                    <Icon
                    name='mapPinLine'
                    color='#2984F8'
                    size= '.20rem' 
                    ></Icon>
                    <SearchBar
                    text = '搜索机构/医生'
                    width = '2.8rem'
                    ></SearchBar>
                </div>
                
                <Scroll
                id ='cate-scroll'
                loadDataSaga = {loadDataSaga}
                list = {list}
                height = '5.8rem'
                pullingUp
                >
                    {
                        list.map(item => {
                            // console.log(item);
                            return (
                                <Card
                                img = {hospitallistimg}
                                title ={item.name}
                                infoCount = {item.info}
                                height = '1.2rem'
                                bgColor = '#fff'
                                key ={item.id}
                                click = {goHospitalhome(item.id)}
                                rightCount = {<Icon
                                    name='arrowRightLine'
                                    size= '.20rem'
                                    color= '#aaaaaa'
                                    ></Icon>}
                                ></Card>
                            )
                        })
                    }
                </Scroll>
            </HospitalListWrapper>
    )
}
